import React, { useEffect, useState } from "react";
import { Outlet, useNavigate, useLocation } from "react-router-dom";

import "./index.css";
import submitImg from "./img/successpay.png";
import apayImg from "./img/apay.png";
import wechatpayImg from "./img/wechatpay.png";
import yinlianpayImg from "./img/yinlianpay.png";
import yuepayImg from "./img/yuepay.png";
import axios from "axios";
import InterIP from "../../IP/IP";

let IP = InterIP().props.children;

export default function SubmitSuccess() {
  const navigate = useNavigate();
  const loca = useLocation();
  const [address, setAddress] = useState({});
  const [user, setUser] = useState({});

  useEffect(() => {
    // 地址查询请求
    axios
      .post("http://" + IP + ":3000/index/getaddress", {
        address_id: loca.state.address_id,
      })
      .then((res) => {
        setAddress((address) => res.data[0]);
      });
    // 用户账户余额和积分余额查询
    axios.post("http://" + IP + ":3000/user/selUser", {
      user_id: document.cookie.slice(5)
    }).then((res) => setUser((user) => user = res.data[0]))
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  function toApay() {
    navigate("apay", { state: { sumMoneyAll: loca.state.sumMoneyAll } });
  }
  function toWeChatPay() {
    navigate("wechatpay", { state: { sumMoneyAll: loca.state.sumMoneyAll } });
  }
  function toYinLianPay() {
    navigate("yinlianpay", { state: { sumMoneyAll: loca.state.sumMoneyAll } });
  }
  function toYuepay() {
    navigate("yuepay", { state: loca.state });
  }
  function backShoppingCart() {
    navigate("/home/shoppingCart");
  }
  return (
    <div className="tyc_submitsuccess">
      <ul className="tyc_mianbaoxie">
        <li className="tyc_fristli" onClick={backShoppingCart}>
          我的购物车
        </li>
        <li>确认订单信息</li>
        <li className="tyc_lastli">订单提交成功</li>
      </ul>
      <div className="tyc_submitHint">
        <div>
          <img src={submitImg} alt="" />
        </div>
        <p>
          <span>订单已提交，请于24小时内完成支付</span>
          <strong>（逾期订单将被取消）</strong>
        </p>
      </div>
      <div className="tyc_delivery">
        送货至： {address.consignee} {address.area} {address.street} {address.contact_phone}
      </div>
      <div className="tyc_handle_money">
        <span>{loca.state.shops ? "应付金额：" : "应付积分："}</span>
        <strong>{loca.state.shops ? `￥${loca.state.sumMoneyAll.toFixed(2)}` : `${loca.state.sumMoneyAll} 积分`}</strong>
        <em>（在线支付）</em>
      </div>
      <div className="tyc_pay_platform">
        <h3>支付平台</h3>
        <div>
          <input type="radio" name="pay" id="apay" onClick={toApay} />
          <label htmlFor="apay" onClick={toApay}>
            <img src={apayImg} alt="" />
          </label>
          <input type="radio" name="pay" id="wechatpay" onClick={toWeChatPay} />
          <label htmlFor="wechatpay" onClick={toWeChatPay}>
            <img src={wechatpayImg} alt="" />
          </label>
          <input
            type="radio"
            name="pay"
            id="yinlianpay"
            onClick={toYinLianPay}
          />
          <label htmlFor="yinlianpay" onClick={toYinLianPay}>
            <img src={yinlianpayImg} alt="" />
          </label>
          <input type="radio" name="pay" id="yuepay" onClick={toYuepay} />
          <label htmlFor="yuepay" onClick={toYuepay} className="tyc_yueapy">
            <img src={yuepayImg} alt="" />
            <span>({loca.state.shops ? `￥${parseFloat(user.money).toFixed(2)}` : `${parseFloat(user.integral)} 积分`})</span>
          </label>
        </div>
      </div>
      <Outlet></Outlet>
    </div>
  );
}
